<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="24" style="margin-bottom: 20px;">
        <a-select show-search
                  allowClear
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  style="width: 200px;margin-right: 20px;"
                  @change="handleChange" v-model="deviceId" placeholder="设备名称">
          <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.deviceName }}
          </a-select-option>
        </a-select>
        <a-range-picker @change="onChange" style="width: 200px;margin-right: 20px;"/>
        <a-button type="primary" @click="search" style="background: #3C67F1;border: none;">查询</a-button>
      </a-col>
      <a-col :span="12">
        <a-button type="primary" @click="sheet" style="background: #3C67F1;border: none;">填写养护单</a-button>
      </a-col>
      <a-col :span="12" style="text-align: right;margin-bottom: 15px;">
        <a-button icon="export" style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" @click="exportXlsBtn('定期养护')" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-table rowKey="id" :pagination="false" :loading="loading" :columns="columns" :data-source="data" bordered>
          <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        </a-table>
        <a-pagination
          style="float: right;margin-top: 20px"
          v-model="pageNo"
          :total="total"
          :page-size="pageSize"
          @change="onShowSizeChange"
        >
        </a-pagination>
      </a-col>
    </a-row>
    <MaintenanceSheet ref="MaintenanceSheet"></MaintenanceSheet>
  </div>
</template>
<script>
// 引入混入封装方法
import getAll from './getAll'
import {list, aliyunDeviceCuring, query} from '@api/device.js'

const columns = [
  {
    title: '序号',
    scopedSlots: {customRender: 'index'},
    key: 'name'
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
  },
  {
    title: '维护保养内容',
    dataIndex: 'curingContent',
    ellipsis: true
  },
  {
    title: '维护保养时间',
    dataIndex: 'createTime',
    ellipsis: true
  },
  {
    title: '维护保养人',
    dataIndex: 'createBy',
    ellipsis: true
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    ellipsis: true
  }
]

import MaintenanceSheet from './MaintenanceSheet'
import {exportXls} from "@api/meteorological";

export default {
  mixins: [getAll],
  data() {
    return {
      data: [],
      columns,
      loading: true,
      startDate: '',
      endDate: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      exportUrl: '/fabr/fabrDeviceCuring/exportXls'
    }
  },
  components: {
    MaintenanceSheet
  },
  mounted() {
    this.dataList(this.pageNo, this.pageSize)
  },
  methods: {
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    onChange(date, dateString) {
      this.startDate = dateString[0]
      this.endDate = dateString[1]
    },
    // 搜索
    search() {
      this.loading = true
      aliyunDeviceCuring(this.pageNo, this.pageSize, this.startDate, this.endDate, this.deviceId).then(res => {
        this.loading = false
        this.$message.success('查询成功');
        this.data = res.result.records
      }).catch(err => {
        this.loading = false
      })
    },
    // 分页
    onShowSizeChange(pageNo, pageSize) {
      console.log(pageNo, pageSize)
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.dataList(this.pageNo, this.pageSize)
    },
    // 数据获取
    dataList(pageNo, pageSize) {
      query().then(res => {
        this.list = res.result
      }).catch(err => {
      })
      this.loading = true
      aliyunDeviceCuring(pageNo, pageSize).then(res => {
        this.data = res.result.records
        this.total = res.result.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    sheet() {
      this.$refs.MaintenanceSheet.modal2Visible = true
      this.$refs.MaintenanceSheet.title = '填写设备维护单'
      this.$refs.MaintenanceSheet.init()
    }
  }
}
</script>